<template>
	<scroll-view scroll-y="true" class="content">
		<view class="date">
			<view class="key">
				{{showTimeStr}}
			</view>
			<view class="value">
				{{dateTimeString}}
			</view>
			<image src="../../static/guided_icon_more@2x.png"></image>
		</view>
		<view class="type" v-if="showTeam">
			<view class="name">预约形式</view>
			<image style="margin-right:10rpx;" class="check-box" :src="isTeam?iconList[0]:iconList[1]"
				@click="teamChecked(false)">
			</image>
			<text>个人</text>
			<image style="margin:0 10rpx 0 60rpx;" class="check-box" :src="isTeam?iconList[1]:iconList[0]"
				@click="teamChecked(true)">
			</image>
			<text>团队</text>
		</view>
		<view class="ticket">
			<view class="title">观众信息</view>
			<view class="item" v-if="!isTeam" v-for="(item,index) in watcherList">
				<view class="header">
					<text>普通门票</text>
					<image src="../../static/reservation_icon_bianji@2x.png" @click="editPerson(index)"></image>
					<image @click="removeWatcher(index)" src="../../static/reservation_icon_shanchu@2x.png"></image>
				</view>
				<view class="name">{{item.name}}</view>
				<view class="card"><text>身份证</text>{{item.card}}</view>
				<view class="pay"><text>预约名额</text>免费</view>
			</view>
			<view class="item" v-if="isTeam" v-for="(item,index) in teamList">
				<view class="header">
					<text>团队票</text>
					<image src="../../static/reservation_icon_bianji@2x.png" @click="editPerson(index)"></image>
					<image v-if="!isTeam" @click="removeWatcher(index)"
						src="../../static/reservation_icon_shanchu@2x.png"></image>
				</view>
				<view class="name">{{item.name}}<text v-if="index==0">领队</text><text v-if="index==1">副领队</text></view>
				<view class="card"><text>身份证</text>{{item.card}}</view>

				<view class="pay"><text>预约名额</text>免费</view>
			</view>
			<view class="team-num" v-if="isTeam">
				<view class="key">团队人数</view>
				<input class="value" v-model="num" placeholder="请输入团队人数" placeholder-class="placeholder" />
			</view>
			<view class="add" @click="showPopup" v-if="!isTeam&&watcherList.length<5">
				<image src="../../static/reservation_icon_add@2x.png"></image>
				<text>添加观众（最多5人）</text>
			</view>
		</view>
		<button class="buttom" @click="handlerClick">确认预约</button>

		<cover-view class="input" v-if="isPopup" @touchmove.stop.prevent="moveHandle">
			<view @click="isPopup=false" style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;"></view>
			<view class="picker">
				<view class="row" style="margin-top: 40rpx;">
					<view class="name">姓名</view>
					<input class="uni-input" v-model="person.name"></input>
				</view>
				<view class="row">
					<view class="name">身份证</view>
					<input class="uni-input" v-model="person.card"></input>
				</view>
				<view class="row">
					<view class="name">手机</view>
					<input class="uni-input" v-model="person.phone"></input>
				</view>
				<view class="row">
					<view class="name">年龄</view>
					<picker @change="bindPickerChange" :value="ageIndex" :range="array">
						<view class="uni-input">{{person.age}}</view>
					</picker>
				</view>
				<view class="row">
					<view class="name">地区</view>
					<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
						<view class="uni-input">
							{{person.location}}
						</view>
					</pick-regions>
				</view>
				<view class="row" style="margin-bottom: 80rpx;">
					<view class="name">是否接种疫苗</view>
					<image style="margin:0 10rpx 0 60rpx;" class="check-box"
						:src="person.isChecked?iconList[1]:iconList[0]" @click="person.isChecked=true">
					</image>
					<text>已接种</text>
					<image style="margin:0 10rpx 0 60rpx;" class="check-box"
						:src="person.isChecked?iconList[0]:iconList[1]" @click="person.isChecked=false">
					</image>
					<text>未接种</text>
				</view>
				<view class="btn">
					<button style="background: #AE6059;margin-right: 10rpx;" @click="reset">重置</button>
					<button style="background: #B9AC90;margin-left: 10rpx;" @click="addWatcher(isTeam)">添加</button>
				</view>
			</view>
		</cover-view>
	</scroll-view>
</template>

<script>
	import secTitle from '../customer/secTitle.vue'
	import pickRegions from '../../components/pick-regions/pick-regions.vue'
	import {
		dateToString
	} from '../../js_sdk/date-parse/date-parser.js'
	import {
		doPostJson
	} from '../../js_sdk/request-helper.js'
	import {
		checkPhoneNumber,
		checkIdcard
	} from '../../js_sdk/utils.js'
	export default {
		components: {
			secTitle,
			pickRegions,
		},
		data() {
			return {
				isPopup: false,
				showTime: false,
				isTeam: false,
				num: undefined,
				showTeam: true,
				showTimeStr: '参观时间',

				userId: undefined,

				// regionName:"江苏省 苏州市 昆山市"
				region: [],
				defaultRegion: ['江苏省', '苏州市', '昆山市'],
				defaultRegionCode: '320583',

				date: "",
				dateTimeString: "",
				timing: "",
				type: undefined,
				orderType: "",

				editIndex: -1,
				watcherList: [],
				teamList: [],
				person: {},

				ageIndex: 0,
				array: ['1~12岁', '12~16岁', '16~24岁', '24岁以上'],
				iconList: [
					'../../static/interactive_icon_default@2x.png',
					'../../static/interactive_icon_selected@2x.png'
				],
				params: undefined,
			}
		},
		computed: {
			regionName() {
				// 转为字符串
				return this.region.map(item => item.name).join(' ')
			}
		},
		onLoad: function(option) {
			this.userId = uni.getStorageSync('userInfo').id
			this.person = {
				name: "",
				card: "",
				phone: "",
				age: "",
				location: this.defaultRegion[0] + ' ' + this.defaultRegion[1] + ' ' + this.defaultRegion[2],
				isChecked: true
			}

			const params = JSON.parse(decodeURIComponent(option.params))
			this.date = params.date;
			this.showTime = params.type <= 2
			if (this.showTime) {
				this.timing = params.timing;
			} else {
				this.showTeam = false
				this.showTimeStr = '活动时间'
			}
			this.params = params
			this.type = params.type
			switch (params.type) {
				case 1:
					this.dateTimeString = dateToString(new Date(params.date), 'yyyy年MM月dd日 hh:mm')
					this.orderType = '参观预约'
					break;
				case 2:
					this.dateTimeString = dateToString(new Date(params.date), 'yyyy年MM月dd日')
					this.orderType = '特展预约'
					break;
				case 3:
					this.dateTimeString = dateToString(new Date(params.date), 'yyyy年MM月dd日')
					this.orderType = '社教活动预约'
					break;
				case 4:
					this.dateTimeString = dateToString(new Date(params.date), 'yyyy年MM月dd日')
					this.orderType = '讲座预约'
					break;
			}
			this.addWatcher(true)
			this.addWatcher(true)
		},
		methods: {
			handlerClick() {
				let personList = [];
				if (this.isTeam) {
					for (let item of this.teamList) {
						let person = {
							pname: item.name,
							pphone: item.phone,
							pcard: item.card,
							page: item.age,
							plocation: item.location,
							pisHealthy: item.isChecked ? 1 : 0
						}
						personList.push(person)
					}
				} else {
					for (let item of this.watcherList) {
						let person = {
							pname: item.name,
							pphone: item.phone,
							pcard: item.card,
							page: item.age,
							plocation: item.location,
							pisHealthy: item.isChecked ? 1 : 0
						}
						personList.push(person)
					}
				}
				let parmas = {
					userId: this.userId,
					typeCode: this.type,
					typeName: this.orderType,
					actId: this.params.id,
					isTeam: this.isTeam,
					num: this.num,
					orderStart: new Date(this.date).getTime(),
					personList: personList
				}
				doPostJson('/blade-order/ord/insert',
					parmas,
					(res) => {
						uni.navigateTo({
							url: './orderSucccess?type=' + this.type
						})
					}, (err) => {
						uni.showToast({
							title: err,
							icon: 'error'
						})
					})
			},
			getDate(date) {
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				return `${year}-${month}-${day}`;
			},
			bindPickerChange: function(e) {
				this.ageIndex = e.target.value
				this.person.age = this.array[this.ageIndex]
			},
			handleGetRegion(region) {
				this.region = region
				this.person.location = this.region.map(item => item.name).join(' ')
			},
			isTeamChange(e) {
				this.isTeam = e.detail.value == 'team'
			},
			changeChecked(index, isTeam) {
				let list = []
				if (isTeam) {
					for (let i in this.teamList) {
						let item = this.teamList[i]
						if (i == index) {
							item.isChecked = !item.isChecked
						}
						list.push(item)
					}
					this.teamList = list
				} else {
					for (let i in this.watcherList) {
						let item = this.watcherList[i]
						if (i == index) {
							item.isChecked = !item.isChecked
						}
						list.push(item)
					}
					this.watcherList = list
				}
			},
			addWatcher(isTeam) {
				let watcher = {
					name: "",
					card: "",
					phone: "",
					age: this.array[0],
					location: this.defaultRegion[0] + ' ' + this.defaultRegion[1] + ' ' + this.defaultRegion[2],
					isChecked: true
				}
				if (isTeam) {
					if (this.editIndex != -1 && this.editIndex < this.teamList.length) {
						if (!checkPhoneNumber(this.person.phone)) {
							uni.showToast({
								icon: 'error',
								title: '手机号格式有误'
							})
							return
						}
						if (!checkIdcard(this.person.card.toUpperCase())) {
							uni.showToast({
								icon: 'error',
								title: '身份证格式有误'
							})
							return
						}
						let list = this.teamList
						list[this.editIndex] = {
							name: this.person.name,
							card: this.person.card.toUpperCase(),
							phone: this.person.phone,
							age: this.person.age,
							location: this.person.location,
							isChecked: this.person.isChecked
						}
						this.teamList = list
					} else {
						this.teamList.push(watcher)
					}
				} else {
					if (this.editIndex != -1 && this.editIndex < this.watcherList.length) {
						if (!checkPhoneNumber(this.person.phone)) {
							uni.showToast({
								icon: 'error',
								title: '手机号格式有误'
							})
							return
						}
						if (!checkIdcard(this.person.card.toUpperCase())) {
							uni.showToast({
								icon: 'error',
								title: '身份证格式有误'
							})
							return
						}
						let list = this.watcherList
						list[this.editIndex] = {
							name: this.person.name,
							card: this.person.card.toUpperCase(),
							phone: this.person.phone,
							age: this.person.age,
							location: this.person.location,
							isChecked: this.person.isChecked
						}
						this.watcherList = list
					} else {
						if (this.watcherList.length < 5) {
							if (!checkPhoneNumber(this.person.phone)) {
								uni.showToast({
									icon: 'error',
									title: '手机号格式有误'
								})
								return
							}
							if (!checkIdcard(this.person.card.toUpperCase())) {
								uni.showToast({
									icon: 'error',
									title: '身份证格式有误'
								})
								return
							}
							let item = {
								name: this.person.name,
								card: this.person.card.toUpperCase(),
								phone: this.person.phone,
								age: this.person.age,
								location: this.person.location,
								isChecked: this.person.isChecked
							}
							this.watcherList.push(item)
						}
					}
				}
				this.isPopup = false
			},
			removeWatcher(index) {
				if (this.watcherList.length <= 1) {
					return
				}
				let list = this.watcherList
				list.splice(index, 1)
				this.watcherList = list
			},
			teamChecked(isTeam) {
				this.isTeam = isTeam
			},
			moveHandle() {

			},
			reset() {
				this.person = {
					name: "",
					card: "",
					phone: "",
					age: this.array[0],
					location: this.defaultRegion[0] + ' ' + this.defaultRegion[1] + ' ' + this.defaultRegion[2],
					isChecked: true
				}
			},
			editPerson(index) {
				console.log(index)
				this.editIndex = index
				if (this.isTeam) {
					this.person = {
						name: this.teamList[index].name,
						card: this.teamList[index].card,
						phone: this.teamList[index].phone,
						age: this.teamList[index].age,
						location: this.teamList[index].location,
						isChecked: this.teamList[index].isChecked
					}
				} else {
					this.person = {
						name: this.watcherList[index].name,
						card: this.watcherList[index].card,
						phone: this.watcherList[index].phone,
						age: this.watcherList[index].age,
						location: this.watcherList[index].location,
						isChecked: this.watcherList[index].isChecked
					}
				}
				this.isPopup = true
			},
			showPopup() {
				this.reset()
				this.editIndex = -1
				this.isPopup = true
			}
		}
	}
</script>

<style>
	.content {
		position: fixed;
		width: 100%;
		height: calc(100% - 88rpx);
		background: #eee;
	}

	.date {
		position: relative;
		width: calc(100% - 80rpx);
		height: 180rpx;
		display: flex;
		flex-direction: column;
		padding: 0 40rpx;
		background: #fff;
		margin-bottom: 10rpx;
		align-items: flex-start;
		justify-content: center;
	}

	.date .key {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	.date .value {
		color: #999;
		font-size: 28rpx;
	}

	.date image {
		z-index: 10;
		bottom: 36rpx;
		right: 40rpx;
		position: absolute;
		height: 30rpx;
		width: 30rpx;
	}

	.type {
		width: calc(100% - 80rpx);
		padding: 30rpx 40rpx;
		margin-bottom: 10rpx;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.type .name {
		font-weight: bold;
	}

	.check-box {
		width: 40rpx;
		height: 40rpx;
	}

	.ticket {
		width: calc(100% - 80rpx);
		padding: 20rpx 40rpx;
		background: #fff;
	}

	.ticket .title {
		color: #333;
		font-weight: bold;
		font-size: 32rpx;
		margin-bottom: 20rpx;
	}

	.ticket .item {
		width: 100%;
		height: auto;
		background: #eee;
		padding-bottom: 10rpx;
		margin-bottom: 20rpx;
	}

	.ticket .item .header {
		width: calc(100% - 80rpx);
		display: flex;
		padding: 40rpx 0 20rpx 0;
		margin: 0 40rpx;
		border-bottom: 1rpx solid #ddd;
	}

	.ticket .item .header text {
		width: calc(100% - 120rpx);
		font-size: 32rpx;
		color: #333;
	}

	.ticket .item .header image {
		height: 40rpx;
		margin-left: 40rpx;
		width: 40rpx;
	}

	.ticket .item .name {
		margin: 20rpx 50rpx 0 50rpx;
		font-size: 32rpx;
		line-height: 40rpx;
		color: #333;
	}

	.ticket .item .name text {
		color: #AE6059;
		margin-left: 20rpx;
	}

	.ticket .item .card {
		margin: 0 50rpx;
		font-size: 32rpx;
		line-height: 40rpx;
		color: #333;
	}

	.ticket .item .card text {
		width: 160rpx;
		display: inline-block;
	}

	.ticket .item .pay {
		margin: 0 50rpx;
		line-height: 80rpx;
		font-size: 32rpx;
		color: #333;
	}

	.ticket .item .pay text {
		width: 160rpx;
		display: inline-block;
	}

	.team-num {
		background: #eee;
		height: 80rpx;
		width: calc(100% - 100rpx);
		padding: 0 50rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.team-num .key {
		font-size: 30rpx;
		color: #333;
	}

	.team-num .value {
		width: 400rpx;
		font-size: 28rpx;
		color: #999;
	}

	.placeholder {
		color: #999;
	}

	.add {
		width: calc(100% - 4rpx);
		border: 2rpx #999 dashed;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
	}

	.add text {
		font-size: 32rpx;
		color: #999;
		margin-left: 20rpx;
	}

	.add image {
		width: 30rpx;
		height: 30rpx;
	}

	.input {
		position: fixed;
		width: 100%;
		height: calc(100% - 88rpx);
		background: #00000066;
		top: 88rpx;
		left: 0;
	}

	.picker {
		position: absolute;
		bottom: 0;
		width: calc(100% - 80rpx);
		height: auto;
		padding: 40rpx 40rpx;
		background: #fff;
	}

	.row {
		display: flex;
		margin-bottom: 20rpx;
		align-items: center;
		justify-content: flex-start;
		height: 100rpx;
	}

	.name {
		min-width: 160rpx;
		line-height: 30rpx;
		font-size: 30rpx;
		color: #333;
	}

	.uni-input {
		min-height: 42rpx;
		width: 480rpx;
		color: #666;
		padding: 26rpx 20rpx;
		border: 1rpx solid #ddd;
		font-size: 30rpx;
	}

	.buttom {
		font-size: 32rpx;
		height: 80rpx;
		background: #b9ac90;
		margin: 40rpx;
		color: #fff;
	}

	.btn {
		height: 80rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.btn button {
		flex: 1;
		font-size: 30rpx;
		color: #fff;
		border: 0;
		border-radius: 0;
	}
</style>
